<template>
  <div class="app-container">


    <el-form :inline="true" :model="queryParams" class="demo-form-inline" @submit.prevent>
      <el-form-item label="申请人姓名">
        <el-input v-model="queryParams.applyName" placeholder="请输入申请人姓名" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="小区名称">
        <el-input v-model="queryParams.communityName" placeholder="请输入小区名称" clearable @keyup.enter="handleQuery" />
      </el-form-item> -->
      <el-form-item label="审核状态">
        <el-select style="width: 240px;" v-model="queryParams.status" placeholder="请选择审核状态" clearable>
          <el-option label="已申请" :value="1" />
          <el-option label="已审核" :value="2" />
          <el-option label="已拒绝" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
     <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
      </el-col>
     </el-row> -->
    <el-table :data="list" border style="width: 100%; margin-top: 20px;">
      <!-- <el-table-column prop="applyId" label="申请ID" width="200" /> -->
      <el-table-column prop="applyName" label="申请人姓名" width="120" fixed="left" />
      <el-table-column prop="mobile" label="联系电话" width="140" />
      <el-table-column prop="communityName" label="小区名称" width="200" />
      <el-table-column prop="communityName" label="所在省市区" width="200">
        <template #default="scope">
          {{ scope.row.provinceName + scope.row.cityName + scope.row.areaName }}
        </template>
      </el-table-column>
      <el-table-column prop="detailAddress" label="详细地址" width="250" />
      <el-table-column prop="applyType" label="小区组织状态" width="140">
        <template #default="scope">
          <el-tag v-if="scope.row.applyType == '1'" type="primary">预组建</el-tag>
          <el-tag v-else-if="scope.row.applyType == '2'" type="warning">筹备组</el-tag>
          <el-tag v-else-if="scope.row.applyType == '3'" type="success">业委会</el-tag>
          <el-tag v-else-if="scope.row.applyType == '4'" type="info">其他</el-tag>
          <el-tag v-else type="info">{{ scope.row.applyType }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="applyReason" label="申请原因" width="160">
        <template #default="scope">
          <span v-if="scope.row.applyReason == '1'">成立业委会</span>
          <span v-else-if="scope.row.applyReason == '2'">业委会换届</span>
          <span v-else-if="scope.row.applyReason == '3'">罢免业委会</span>
          <span v-else-if="scope.row.applyReason == '4'">解聘/续聘/选聘物业</span>
          <span v-else-if="scope.row.applyReason == '99'">其他</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="applyPersonType" label="申请人类型" width="140">
        <template #default="scope">
          <span v-if="scope.row.applyPersonType == '1'">小区人员</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="method" label="了解方式" width="120">
        <template #default="scope">
          <span v-if="scope.row.method == '1'">搜索</span>
          <span v-else-if="scope.row.method == '2'">公众号</span>
          <span v-else-if="scope.row.method == '3'">短视频</span>
          <span v-else-if="scope.row.method == '5'">他人推荐</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="buildNum" label="楼栋数" width="100" />
      <el-table-column prop="roomNum" label="户数" width="100" />
      <el-table-column prop="pictureUrl" label="组织证明材料" width="150">
        <template #default="scope">
          <div v-if="scope.row.pictureUrl" style="display: flex; align-items: center; gap: 8px;">
            <el-image 
              :src="scope.row.pictureUrl.split(',')[0]" 
              :preview-src-list="scope.row.pictureUrl.split(',').filter(url => url)"
              :initial-index="0"
              fit="cover"
              style="width: 50px; height: 50px; border-radius: 4px; cursor: pointer;"
              preview-teleported
            />
           
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="审核状态" width="120" fixed="right">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 1" type="warning">已申请</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="success">已审核</el-tag>
          <el-tag v-else-if="scope.row.status === 3" type="danger">已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="申请时间" width="180" />
      <el-table-column prop="auditDate" label="审核时间" width="180" />
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-button 
            v-if="scope.row.status === 1" 
            type="primary" 
            link
            size="small" 
            @click="handleCheck(scope.row, 2)"
          >
            通过
          </el-button>
          <el-button 
            v-if="scope.row.status === 1" 
            type="primary" 
            link
            size="small" 
            @click="handleCheck(scope.row, 3)"
          >
            拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 二维码弹窗 -->
    <el-dialog v-model="qrcodeDialogVisible" title="生成二维码" width="500px">
      <el-form :model="qrcodeForm" label-width="100px">
        <el-form-item label="页面路径" required>
          <el-input v-model="qrcodeForm.page" placeholder="请输入页面路径" />
        </el-form-item> 
        <el-form-item label="参数" required>
          <el-input v-model="qrcodeForm.scene" placeholder="请输入参数" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="qrcodeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleGenerateQrcode">生成</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, h } from 'vue'
import { getCheckinReviewList, pmsWxGetWxacode, checkCommunityApply } from '@/api/house/checkinreview'
import Pagination from '@/components/Pagination/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const list = ref([])
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  applyName: '',
  communityName: '',
  status: ''
})

// 二维码弹窗相关
const qrcodeDialogVisible = ref(false)
const qrcodeForm = ref({
  page: '',
  scene: ''
})

const getList = async () => {
  const data = await getCheckinReviewList(queryParams.value)
  console.log(data)
  data.rows = data.rows.map((item=>{
    return {
      ...item,
      ...item.pmsCommunityApply
    }
  }))
  console.log("222",data.rows)
  list.value = data?.rows || []
  total.value = data?.total || 0
}

// 审核方法
const handleCheck = async (row, status) => {
  const statusText = status === 2 ? '通过' : '拒绝'
  
  try {
    await ElMessageBox.confirm(
      `确定要${statusText}该申请吗？`,
      '确认审核',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    const params = {
      applyId: row.applyId.toString(),
      status: status
    }
    
    await checkCommunityApply(params)
    ElMessage.success(`${statusText}成功`)
    getList() // 刷新列表
  } catch (error) {
    if (error !== 'cancel') {
      console.error('审核失败:', error)
      ElMessage.error('审核失败')
    }
  }
}

const handleAdd = () => {
  openQrcodeDialog()
}
const handleQuery = () => {
  queryParams.value.pageNum = 1
  getList()
}

const resetQuery = () => {
  queryParams.value.applyName = ''
  queryParams.value.communityName = ''
  queryParams.value.status = ''
  handleQuery()
}

// 打开二维码弹窗
const openQrcodeDialog = () => {
  qrcodeForm.value = {
    page: '',
    scene: ''
  }
  qrcodeDialogVisible.value = true
}

// 生成二维码
const handleGenerateQrcode = async () => {
  if (!qrcodeForm.value.page || !qrcodeForm.value.scene) {
    ElMessage.warning('请填写完整信息')
    return
  }
  
  try {
    const response = await pmsWxGetWxacode({
      page: qrcodeForm.value.page,
      scene: qrcodeForm.value.scene
    })
    console.log('二维码生成结果:', response)
    ElMessage.success('二维码生成成功')
    qrcodeDialogVisible.value = false
  } catch (error) {
    console.error('生成二维码失败:', error)
    ElMessage.error('生成二维码失败')
  }
}

// 查看图片附件（已移除，改用 el-image 内置预览功能）

getList()
</script>


